<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .float{
            float: left;
            margin-left:30px;
            border: 1px solid darkorange;
        }
        .clear{
            clear: both;
        }
        .even{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="dv1" class="float"></div>
    <div class="clear"></div>
</body>
<script>
    var list = "HTML基础,CSS基础,Javavcript基础,DOM基础,HTML5和CSS3,Javacript高级".split(",");

    //创建元素
    /*(function() {
        var ul = document.createElement('ul');
*/
        //根据数据创建li等子元素
        //加入元素
       /* for (var i = 0; i < list.length; i++) {
            var li = document.createElement('li');
            li.innerHTML = list[i];
            ul.appendChild(li);
        };*/
        /*list.forEach(function(v,i){
            var li = document.createElement('li');
            li.innerHTML = v;
            ul.appendChild(li);
        })
        //加入到DOM树种
        document.getElementById('dv1').appendChild(ul);
    })();
*/
    //创建一个自调用的闭包
//    (function(){
//        //创建ul
//        var ul = document.createElement('ul');
//        document.getElementById('dv1').appendChild(ul);
//        list.forEach(function(v,i){
//            var li = document.createElement('li');
//            ul.appendChild(li);
//            li.innerHTML = v;
//        })
//
//    })();

    //使用拼接字符串的方式处理 forEach方法
//    (function(){
//            var lis = [];
//        list.forEach(function(v){
//            lis.push('<li>'+v+'</li>');
//            document.getElementById('dv1').innerHTML =
//                    '<ul>'+ lis.join('') +'</ul>'
//        })
//    })();

    //map的实现方法

    (function(){

        document.getElementById('dv1').innerHTML ='<ul>'+
           list.map(function(v,i){
            return '<li '+(i % 2 == 1 ? 'class="even"' : '')+'>'+v+'</li>'
                }).join('')+'</ul>';
    })();
</script>
</html>